<template>
    <div style="padding:0 37px 0 44px;width:100%;">
        <div class="breadcrumb-father">
            <div class="new-breadcrumb">
                <router-link :to="{path:'/welcome'}">
                    <img src="../../../assets/imgs/Home.png" alt="">
                </router-link>
                <router-link :to="{path:'/merchant'}">
                    <span>{{$t('button.Merchant')}}</span>
                </router-link>
                <span class="arrow">></span>
                <span :title="$route.query.name">{{$route.query.name}}</span>
            </div>
        </div>

        <div v-if=" companyId == '1' ">
            <div :class="['handle_box',{'handle_box_cn': cnClass, 'handle_box_en': enClass}]">
                <ul class="anchors_ul">
                    <a href="javascript:void(0)" @click="goAnchor('#one',0)">
                        <li class="active" id="one-li">{{$t('mer.CompanyInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#two',1)">
                        <li id="two-li">{{$t('mer.ContactInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#three',2)">
                        <li id="three-li">{{$t('mer.BusinessInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#four',3)">
                        <li id="four-li">{{$t('mer.OnlineBusiness')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#five',4)">
                        <li id="five-li">{{$t('mer.SettlementInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#six',5)">
                        <li id="six-li">{{$t('search.channelInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#seven',6)">
                        <li id="seven-li">{{$t('mer.Attachments')}}</li>
                    </a>
                </ul>
                <!-- anchors_ul结束 -->

                <ul class="button_box" v-if="userType!=='9' && userType !== '11' && userType !== '5' && userType !== '10' && showHandle ">
                    <li class="confirm" v-if='isModify' @click="modify">
                        <icon-svg icon-class="xiugai" class="icon-btn"></icon-svg>{{$t('button.Modify')}}
                    </li>
                    <li class="confirm" v-if='isAdd' @click="addMec()">
                        <icon-svg icon-class="tijiao" class="icon-btn"></icon-svg>{{ $t('button.New1') }}
                    </li>
                    <li class="confirm" v-show='showBtn' @click='commitModify()'>
                        <icon-svg icon-class="tijiao" class="icon-btn"></icon-svg>{{ this.$route.query.merState == '2' ? $t('button.Resubmit') : $t('button.OK') }}
                    </li>
                    <li class="cancel" v-show='!disabled' @click="reset()">
                        <icon-svg icon-class="quxiao" class="icon-btn"></icon-svg>{{$t('button.Cancel')}}
                    </li>
                </ul>
                <!-- button_box结束 -->
            </div>
            <!-- handle_box结束 -->

            <!-- 防止表格层被遮挡 -->
            <div :class="['table-space-div',{'table-space-div_cn': cnClass, 'table-space-div_en': enClass}]"></div>

            <div class="table-div" id="one">
                <div class="title">{{$t('mer.CompanyInfo')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="name">{{$t('mer.Merchant1')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.name" oninput="this.value=this.value.replace(/[/#]/g,'')" :readonly="disabled" maxlength="100" @blur="checkMerchantName" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="address">{{$t('mer.BusinessAddress')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.address" :readonly="disabled" maxlength="200" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.MailAddress')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.mailingAddress" :readonly="disabled" maxlength="200" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="businessRegistrationNo">{{$t('mer.BRNo')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.businessRegistrationNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Capital') + currency }}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.registeredCapital" :readonly="disabled" maxlength="26" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.YearsOfBusiness')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.establishmentYear" :readonly="disabled" maxlength="3" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.IncorporationCountry')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.establishPlace" :readonly="disabled" maxlength="200" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.EmployeeNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.staffNumber" :readonly="disabled" maxlength="6" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="merchantsType">{{$t('mer.MerchantType')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input v-show="disabled" type="text" v-model="merchantsType" :readonly="disabled" :class="{'view-input': disabled}" />
                            <el-select v-show="!disabled" :placeholder="$t('placeH.Please')" v-model="merchantDatas.merchantsType" id="merchantsType" clearable>
                                <el-option :label="$t('mer.OnlineMerchants')" value="Y"></el-option>
                                <el-option :label="$t('mer.UnderLineMerchant')" value="N"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.OwnershipType')}}:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-show="disabled" v-model.trim="merchantDatas.companyType" :readonly="disabled" :class="{'view-input': disabled}" />
                            <el-select v-show="!disabled" :placeholder="$t('placeH.Please')" v-model="merchantDatas.companyType" @change="setCompanyType()" clearable>
                                <el-option :value="$t('mer.LimitedCompany')"></el-option>
                                <el-option :value="$t('mer.Partnership')"></el-option>
                                <el-option :value="$t('mer.SoleProprietor')"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="liaisonPerson">{{$t('mer.Contractperson')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.liaisonPerson" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Email')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.email" :readonly="disabled" maxlength="100" @blur="valiEmail('email')" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Position1')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.post" :readonly="disabled" maxlength="100" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="officeNo">{{$t('mer.OfficePhone')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.officeNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" :readonly="disabled" maxlength="20" @blur="checkPhone('HK')" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="liaisonPhone">{{$t('mer.Mobile')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.liaisonPhone" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Fax')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.fax" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="legalPerson">{{$t('mer.Director')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.legalPerson" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="legalPersonIdNumber">{{$t('mer.DirectorHKID')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.legalPersonIdNumber" :readonly="disabled" maxlength="20" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.DirectorPassport')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.passportNumber" :readonly="disabled" maxlength="10" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Nationality')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.nationality" :readonly="disabled" maxlength="80" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.company')}}:</div>
                        </div>
                        <div class="right-div">
                            <input v-show="disabled" type="text" v-model="merchantDatas.companyName" id="companyName" :readonly="disabled" :class="{'view-input': disabled}" />
                            <el-select v-show="!disabled" v-model="merchantDatas.firmId" @change="selectFirm()" :placeholder="$t('placeH.Please')" :disabled="disabled" clearable @clear="clearFirmNumber">
                                <el-option v-for="item in SuperiorFirmData" :key="item.firmId" :label="item.name" :value="item.firmId"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.companyID')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.firmNumber" readonly="readonly" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="two">
                <div class="title">{{$t('mer.ContactInfo')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.URL')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.url" :readonly="disabled" maxlength="100" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.TargetLaunchDate')}}:</div>
                        </div>
                        <div class="right-div date-input">
                            <input type="text" v-show="disabled" v-model.trim="merchantDatas.launchDate" :readonly="disabled" :class="{'view-input': disabled}" />
                            <el-date-picker v-show="!disabled" v-model.trim="merchantDatas.launchDate" style="width:100%;" clearable :editable=false type="date" :placeholder="$t('placeH.Please')" :readonly="disabled"></el-date-picker>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.TechnicalContact')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.technical" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Email')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.technicalEmail" :readonly="disabled" maxlength="100" @blur="valiEmail('technicalEmail')" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mec.PhoneNo1')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.technicalPhone" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.OperationContact')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.operation" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Email')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.operationEmail" :readonly="disabled" maxlength="100" @blur="valiEmail('operationEmail')" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mec.PhoneNo1')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.accountantPhone" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="three">
                <div class="title">{{$t('mer.BusinessInfo')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id='industry'>{{$t('mer.BusinessNature')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input v-if=" $route.query.states == '1' || $route.query.merState == '2' ? false:true" type="text" v-model="industry" readonly="readonly" :class="{'view-input': disabled}">
                            <el-select v-else v-model="industryObj" @change="selectIndustry()" id="industryObj" value-key="industryName" :placeholder="$t('placeH.Please')" :disabled="disabled" clearable>
                                <el-option v-for="item in optionsI" :key="item.industryCode" :label="item.industryName" :value="item"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ProductsServices')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.profession" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.TargetCustomers')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.targetClient" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.provider')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.paymentServiceProvider" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.LastYearSalesVol') + currency}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.lastYearSalesVol" maxlength="19" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.YearBeforeSales') + currency}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.yearBeforeSales" maxlength="19" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="four">
                <div class="title">{{$t('mer.OnlineBusiness')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.DeliveryProvider')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.expressSupplier" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.CustomerHotline')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.serviceHotline" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ReturnRefundPolicy')}}:</div>
                        </div>
                        <div class="right-div">
                            <input v-show="disabled" type="text" v-model="merchantDatas.isReturnPolicy" :readonly="disabled" :class="{'view-input': disabled}">
                            <el-select v-show="!disabled" :placeholder="$t('placeH.Please')" v-model="merchantDatas.isReturnPolicy" @change="selectReturnPolicy()" clearable :readonly="disabled">
                                <el-option :value="$t('search.YES')"></el-option>
                                <el-option :value="$t('search.NO')"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.FulfuillmentTime')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.cycleTime" :readonly="disabled" maxlength="20" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ReceiptProvided')}}:</div>
                        </div>
                        <div class="right-div">
                            <input v-show="disabled" type="text" v-model="merchantDatas.isSignFor" :readonly="disabled" :class="{'view-input': disabled}">
                            <el-select v-show="!disabled" :placeholder="$t('placeH.Please')" v-model="merchantDatas.isSignFor" @change="selectIsSignFor" clearable :readonly="disabled">
                                <el-option :value="$t('search.YES')"></el-option>
                                <el-option :value="$t('search.NO')"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.AvgTransactionAmount') + currency}}:</div>
                        </div>
                        <div class="right-div"><input type="text" maxlength="12" v-model.trim="merchantDatas.monthDealAvg" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.MinTransactionAmount')+ currency}}:</div>
                        </div>
                        <div class="right-div"><input type="text" maxlength="12" v-model.trim="merchantDatas.monthDealMin" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.MaxTransactionAmount') + currency}}:</div>
                        </div>
                        <div class="right-div"><input type="text" maxlength="12" v-model.trim="merchantDatas.monthDealMax" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ForecastMonthlySales')}}{{$t('mer.After3Months')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" maxlength="12" v-model.trim="merchantDatas.monthDealSumThree" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ForecastMonthlySales')}}{{$t('mer.After6Months')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" maxlength="12" v-model.trim="merchantDatas.monthDealSumSix" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ForecastMonthlySales')}}{{$t('mer.After1Year')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" maxlength="12" v-model.trim="merchantDatas.monthDealSumYear" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.NoOfTransactions')}}{{$t('mer.After3Months')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" maxlength="12" v-model.trim="merchantDatas.monthOperationRentalThree" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.NoOfTransactions')}}{{$t('mer.After6Months')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" maxlength="12" v-model.trim="merchantDatas.monthOperationRentalSix" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.NoOfTransactions')}}{{$t('mer.After1Year')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" maxlength="12" v-model.trim="merchantDatas.monthOperationRentalYear" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');let source = this.value.replace(/,/g,'').split('.');source[0]=source[0].replace(/(\d)(?=(\d{3})+$)/ig,'$1,');this.value = source.join('.');" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="five">
                <div class="title">{{$t('mer.SettlementInfo')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="accountName">{{$t('mer.AccountName')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.accountName" :readonly="disabled" maxlength="100" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="accountNo">{{$t('mer.AccountNo')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.accountNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="bankName">{{$t('mer.BankName')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.bankName" :readonly="disabled" maxlength="100" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="bankCode">{{$t('mer.BankCode')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.bankCode" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" :readonly="disabled" maxlength="3" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.BranchCode')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.branchCode" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" :readonly="disabled" maxlength="3" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="bankAddres">{{$t('mer.Address')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.bankAddres" :readonly="disabled" maxlength="200" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="setDay">{{$t('AuMer.SettlementPeriod')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input v-show="disabled" type="text" v-model="setDay" :readonly="disabled" :class="{'view-input': disabled}">
                            <el-select v-show="!disabled" :placeholder="$t('placeH.Please')" v-model="merchantDatas.setDay" clearable :readonly="disabled">
                                <el-option value="2" label="T+2"></el-option>
                                <el-option value="3" label="T+3"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id='distributorNumber'>{{$t('search.AgentName')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input v-show='disabled' type="text" v-model="merchantDatas.distributorNumber" :readonly="disabled" :class="{'view-input': disabled}" />
                            <el-select v-show='!disabled' id="distributorObj" v-model="distributorObj" @change='selectId()' value-key="id" clearable :placeholder="$t('placeH.Please')" :readonly="disabled">
                                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id='distributorId'>{{$t('search.levelID1')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-model.trim="merchantDatas.distributorId" readonly="disabled" :class="{'view-input': disabled}" />
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="swiftCode">{{$t('mer.SWIFT')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-model.trim="merchantDatas.swiftCode" :readonly="disabled" maxlength="20" autocomplete="off" :class="{'view-input': disabled}" />
                        </div>
                    </li>
                    <li class="item" v-if="showSalesmanInfo">
                        <div class="left-div">
                            <div class="cont">{{$t('salesman.Salesman')}}:</div>
                        </div>
                        <div class="right-div">
                            <input v-show="disabled" type="text" v-model="merchantDatas.salesmanName" id='salesmanName' :readonly="disabled" :class="{'view-input': disabled}" />
                            <el-select v-show="!disabled" :placeholder="$t('placeH.Please')" id="salesmanObj" v-model="salesmanObj" value-key="id" @change='selectSalesman()' clearable :readonly="disabled">
                                <el-option v-for='item in selectSalesSalesmanData' :key="item.id" :label="item.salesmanName" :value="item"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item" v-if="showSalesmanInfo">
                        <div class="left-div">
                            <div class="cont">{{$t('agent.BDStaffNo')}}:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-model.trim="merchantDatas.salesmanNumber" id="salesmanNumber" readonly="disabled" autocomplete="off" :class="{'view-input': disabled}" />
                        </div>
                    </li>
                    <li class="item" v-if="showSalesmanInfo">
                        <div class="left-div">
                            <div class="cont">{{$t('agent.commissionRatio')}}:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-model.trim="merchantDatas.salesmanProportion" :readonly="disabled" maxlength="5" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'')" :class="{'view-input': disabled}" />
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="chargeType">{{$t('mer.ServiceChargeBearer1')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input v-show="disabled" type="text" v-model="chargeType" :readonly="disabled" :class="{'view-input': disabled}" />
                            <el-select v-show="!disabled" :placeholder="$t('placeH.Please')" v-model="merchantDatas.chargeType" clearable>
                                <el-option :label="$t('mer.Customer')" value="1"></el-option>
                                <el-option :label="$t('button.Merchant')" value="0"></el-option>
                            </el-select>
                        </div>
                    </li>
                </ul>
                <!-- content结束 -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="six">
                <div class="title">{{$t('search.channelInfo')}}</div>
                <ul class="content">
                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{$t('search.WechatRMBWallet')}}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.no" id="no" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="12" @blur="checkSubMerchantNo" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.fee" id="fee" :readonly="disabled" maxlength="6" autocomplete="off" oninput="this.value=this.value.replace(' ','');this.value=this.value.replace(/[^\d\.]/g,'');this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');if(this.value<0){this.value=0};if(this.value>100){this.value=100}" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>
                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{$t('search.WechatHKDWallet')}}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.hkNo" id="hkNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="12" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.wechatHkFee" id="wechatHkFee" autocomplete="off" oninput="this.value=this.value.replace(' ','');this.value=this.value.replace(/[^\d\.]/g,'');this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');if(this.value<0){this.value=0};if(this.value>100){this.value=100}" :readonly="disabled" maxlength="6" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>
                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{ $t('trade.Unionpay') }}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <!-- 原商户号暂时舍去，子商户号作为商户号 -->
                    <!-- <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.unionPayNo" id="unionPayNo" @blur="checkUnionPayNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li> -->
                    <li class="item">
                        <div class="left-div">
                            <!-- <div class="cont">{{$t('search.SubAccountNo')}}:</div> -->
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.unionPaySubNo" id="unionPaySubNo" autocomplete="off" @blur="checkUnionPayNo" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.unionPayFee" id="unionPayFee" autocomplete="off" oninput="this.value=this.value.replace(' ','');this.value=this.value.replace(/[^\d\.]/g,'');this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');if(this.value<0){this.value=0};if(this.value>100){this.value=100}" :readonly="disabled" maxlength="6" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.TerminalNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.terminalNo" id="terminalNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.key')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.unionPaySignKey" id="unionPaySignKey" autocomplete="off" :readonly="disabled" maxlength="32" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>

                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{$t('mer.alipayDirect')}}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.alipayHkNo" id="alipayHkNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="16" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.alipayHkFee" id="alipayHkFee" autocomplete="off" oninput="this.value=this.value.replace(' ','');this.value=this.value.replace(/[^\d\.]/g,'');this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');if(this.value<0){this.value=0};if(this.value>100){this.value=100}" :readonly="disabled" maxlength="6" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.key')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.alipaySignKey" id="alipaySignKey" autocomplete="off" :readonly="disabled" maxlength="32" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="seven">
                <div class="title">{{$t('mer.Attachments')}}</div>
                <ul class="content">
                    <li class="image-item">
                        <div class="img-div">
                            <div class="img-title" id="businessRegistrationUrl">{{$t('mer.BR')}}*</div>
                            <div class="show-div" v-show="merchantDatas.businessRegistrationUrl">
                                <img :src="merchantDatas.businessRegistrationUrl" class="avatar imgNow pointer" @click="handlePictureCardPreview('businessRegistrationUrl')">
                                <div class="btn-div">
                                    <div :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('businessRegistrationUrl')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                            <div class="file-div file-group-div" v-show="!merchantDatas.businessRegistrationUrl && !disabled">
                                <el-upload action="/api/share/picture/upload" accept="image/jpeg,image/png,image/png" :before-upload="beforeImgUpload" :readonly="disabled" :show-file-list="false" :on-success="handleBusinessSuccess" name="upfile" list-type="picture" :headers="headers">
                                </el-upload>
                            </div>
                        </div>
                    </li>
                    <li class="image-item">
                        <div class="img-div">
                            <div class="img-title">{{$t('mer.CertOfIncoporation')}}</div>
                            <div class="show-div" v-show="merchantDatas.licenseImageUrl" id="licenseImageUrl">
                                <img :src="merchantDatas.licenseImageUrl" class="avatar imgNow pointer" @click="handlePictureCardPreview('licenseImageUrl')">
                                <div class="btn-div">
                                    <div :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('licenseImageUrl')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg1()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                            <div class="file-div file-group-div" v-show="!merchantDatas.licenseImageUrl && !disabled">
                                <el-upload action="/api/share/picture/upload" accept="image/jpeg,image/png,image/png" :before-upload="beforeImgUpload" :readonly="disabled" :show-file-list="false" :on-success="handleCompanySuccess" name="upfile" list-type="picture" :headers="headers">
                                </el-upload>
                            </div>
                        </div>
                    </li>
                    <li class="image-item">
                        <div class="img-div">
                            <div class="img-title" id="identityCardFrontImageUrl">{{$t('mer.DirectorHKID1')}}*</div>
                            <div class="show-div" v-show="merchantDatas.identityCardFrontImageUrl">
                                <img :src="merchantDatas.identityCardFrontImageUrl" class="avatar imgNow pointer" @click="handlePictureCardPreview('identityCardFrontImageUrl')">
                                <div class="btn-div">
                                    <div :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('identityCardFrontImageUrl')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg2()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                            <div class="file-div file-group-div" v-show="!merchantDatas.identityCardFrontImageUrl && !disabled">
                                <el-upload action="/api/share/picture/upload" accept="image/jpeg,image/png,image/png" :before-upload="beforeImgUpload" :readonly="disabled" :show-file-list="false" :on-success="handleCopySuccess" name="upfile" list-type="picture" :headers="headers">
                                </el-upload>
                            </div>
                        </div>
                    </li>
                    <li class="image-item">
                        <div class="img-div">
                            <div class="img-title" id="bankCardImageUrl">{{$t('mer.BankStatement')}}*</div>
                            <div class="show-div" v-show="merchantDatas.bankCardImageUrl">
                                <img :src="merchantDatas.bankCardImageUrl" class="avatar imgNow pointer" @click="handlePictureCardPreview('bankCardImageUrl')">
                                <div class="btn-div">
                                    <div :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('bankCardImageUrl')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg3()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                            <div class="file-div file-group-div" v-show="!merchantDatas.bankCardImageUrl && !disabled">
                                <el-upload action="/api/share/picture/upload" accept="image/jpeg,image/png,image/png" :before-upload="beforeImgUpload" :readonly="disabled" :show-file-list="false" :on-success="handleMonthlySuccess" name="upfile" list-type="picture" :headers="headers">
                                </el-upload>
                            </div>
                        </div>
                    </li>
                    <li class="image-item">
                        <div class="img-div">
                            <div class="img-title">{{$t('other.MerchantLogo')}}</div>
                            <div class="show-div" v-if="merchantDatas.logo" id="licenseImageUrl">
                                <img :src="merchantDatas.logo" class="avatar imgNow pointer" @click="handlePictureCardPreview('logo')">
                                <div class="btn-div">
                                    <div :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('logo')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg5()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                            <div class="file-div file-group-div" v-show="!merchantDatas.logo && !disabled">
                                <el-upload action="/api/share/picture/upload" accept="image/jpeg,image/png,image/png" :before-upload="beforeImgUpload" :readonly="disabled" :show-file-list="false" :on-success="handleLogoSuccess" name="upfile" list-type="picture" :headers="headers">
                                </el-upload>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- content结束 -->

                <div class="image-group-title">{{$t('mer.Photos')}}*</div>

                <ul class="content" id="merImgUl" v-show="$route.query.states=='1'">
                    <li class="image-item" id="merImgBtn" v-show='isFiveImg'>
                        <div class="img-div img-group-div">
                            <div class="file-div file-group-div">
                                <el-upload :before-upload="beforeImgUpload" accept="image/jpeg,image/png,image/png" action="/api/share/picture/upload" :readonly="disabled" :show-file-list="false" :on-success="handleStoreLogoSuccess" name="upfile" list-type="picture" :headers="headers">
                                </el-upload>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- content结束 -->

                <!-- 查看图片组 -->
                <ul class="content" id="modifyMerUl" v-show="$route.query.states=='2'">
                    <li class="image-item" v-if='merchantDatas.facadeImageUrl'>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div">
                                <img :src="merchantDatas.facadeImageUrl" @click="handlePictureCardPreview('facadeImageUrl')" />
                                <div class="btn-div">
                                    <div class="view" :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('facadeImageUrl')">{{ $t('button.view') }}</div>
                                    <div :class="[{'del': !disabled}]" v-show='!disabled' @click="delImg10()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="image-item" v-if='merchantDatas.facadeImageUrl1'>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div">
                                <img :src="merchantDatas.facadeImageUrl1" @click="handlePictureCardPreview('facadeImageUrl1')" />
                                <div class="btn-div">
                                    <div class="view" :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('facadeImageUrl1')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg11()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="image-item" v-if='merchantDatas.facadeImageUrl2'>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div">
                                <img :src="merchantDatas.facadeImageUrl2" @click="handlePictureCardPreview('facadeImageUrl2')" />
                                <div class="btn-div">
                                    <div class="view" :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('facadeImageUrl2')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg12()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="image-item" v-if='merchantDatas.facadeImageUrl3'>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div">
                                <img :src="merchantDatas.facadeImageUrl3" @click="handlePictureCardPreview('facadeImageUrl3')" />
                                <div class="btn-div">
                                    <div class="view" :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('facadeImageUrl3')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg13()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="image-item" v-if='merchantDatas.facadeImageUrl4'>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div">
                                <img :src="merchantDatas.facadeImageUrl4" @click="handlePictureCardPreview('facadeImageUrl4')" />
                                <div class="btn-div">
                                    <div class="view" :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('facadeImageUrl4')">{{ $t('button.view') }}</div>
                                    <div class="del" :class="['view', {'view-single': disabled}]" v-show='!disabled' @click="delImg14()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="image-item" v-show='isMerFiveImg'>
                        <div class="img-div img-group-div">
                            <div class="file-div file-group-div">
                                <el-upload :before-upload="beforeImgUpload" action="/api/share/picture/upload" accept="image/jpeg,image/png,image/png" :readonly="disabled" :show-file-list="false" :on-success="shopPhotosSuccess" name="upfile" list-type="picture" :headers="headers">
                                </el-upload>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- content结束 -->

            </div>
            <!-- table-div结束 -->
        </div>

        <div v-else-if=" companyId == '2' ">
            <div :class="['handle_box',{'handle_box_cn': cnClass, 'handle_box_en': enClass}]">
                <ul class="anchors_ul">
                    <a href="javascript:void(0)" @click="goAnchor('#one',0)">
                        <li class="active" id="one-li">{{$t('AuMer.CompanyInfomation')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#two',1)">
                        <li id="two-li">{{$t('AuMer.ContactInfomation')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#three',2)">
                        <li id="three-li">{{$t('AuMer.BillingInfomation')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#four',3)">
                        <li id="four-li">{{$t('search.channelInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#five',4)">
                        <li id="five-li">{{$t('AuMer.OtherInformation')}}</li>
                    </a>
                </ul>
                <!-- anchors_ul结束 -->

                <ul class="button_box" v-if="userType!=='9' && userType !== '11' && userType !== '5' && userType !== '10' && showHandle ">
                    <li class="confirm" v-if='isModify' @click="modify">
                        <icon-svg icon-class="xiugai" class="icon-btn"></icon-svg>{{$t('button.Modify')}}
                    </li>
                    <li class="confirm" v-if='isAdd' @click="addMec()">
                        <icon-svg icon-class="tijiao" class="icon-btn"></icon-svg>{{ $t('button.New1') }}
                    </li>
                    <li class="confirm" v-show='showBtn' @click='commitModify()'>
                        <icon-svg icon-class="tijiao" class="icon-btn"></icon-svg>{{ this.$route.query.merState == '2' ? $t('button.Resubmit') : $t('button.OK') }}
                    </li>
                    <li class="cancel" v-show='!disabled' @click="reset()">
                        <icon-svg icon-class="quxiao" class="icon-btn"></icon-svg>{{$t('button.Cancel')}}
                    </li>
                </ul>
                <!-- button_box结束 -->
            </div>
            <!-- handle_box结束 -->

            <!-- 防止表格层被遮挡 -->
            <div :class="['table-space-div',{'table-space-div_cn': cnClass, 'table-space-div_en': enClass}]"></div>

            <div class="table-div" id="one">
                <div class="title">{{$t('AuMer.CompanyInfomation')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div" id="leftDivId">
                            <div class="cont" id="name">{{$t('AuMer.RegistrationName')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.name" :readonly="disabled" maxlength="100" @blur="checkMerchantName" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="businessRegistrationNo">{{$t('AuMer.AustraliaBusinessNumber')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.businessRegistrationNo" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" :class="{'view-input': disabled}" maxlength="20" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="industry">{{$t('AuMer.BusinessInfomation')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-if="$route.query.states == '1' || $route.query.merState == '2' ?false:true" v-model="industry" readonly="readonly" :class="{'view-input': disabled}" />
                            <el-select v-else v-model="industryObj" @change="selectIndustry()" id='industryObj' value-key="industryName" :placeholder="$t('placeH.Please')" :disabled="disabled" clearable>
                                <el-option v-for="item in optionsI" :key="item.industryCode" :label="item.industryName" :value="item"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="officeNo">{{$t('AuMer.ContactNumber')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.officeNo" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="address">{{$t('AuMer.Address')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.address" :readonly="disabled" maxlength="200" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.City')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model="merchantDatas.bankProvince" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.Postcode')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.mailingAddress" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" maxlength="10" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id='bankCity'>{{$t('AuMer.State')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-if="$route.query.states == '1' || $route.query.merState == '2' ? false:true" v-model.trim="merchantDatas.bankCity" readonly="readonly" :class="{'view-input': disabled}" />
                            <el-select v-model="merchantDatas.bankCity" value-key="id" :placeholder="$t('placeH.Please')" :disabled="disabled" clearable>
                                <el-option v-for="item in AU_State_list" :key="item.areaCode" :label="item.areaName" :value="item.areaCode"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.Website')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.companyUrl" :readonly="disabled" maxlength="150" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id='whiteLable'>{{$t('mer.WhiteLable')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-show="disabled" v-model.trim="whiteLable" readonly="readonly" :class="{'view-input': disabled}" />
                            <el-select v-show="!disabled" v-model="merchantDatas.whiteLable" value-key="id" :placeholder="$t('placeH.Please')" :disabled="disabled" clearable>
                                <el-option value="Y" :label="$t('search.YES')"></el-option>
                                <el-option value="N" :label="$t('search.NO')"></el-option>
                            </el-select>
                        </div>
                    </li>

                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>

                    <li class="item" id="textareaItem" style="width:100%;height:80px;">
                        <div class="left-div" id="textareaLeft">
                            <div class="cont">{{$t('AuMer.CompanyDescripption')}}:</div>
                        </div>
                        <div class="right-div" id="textareaRight" style="height:100%;padding:4px 4px 4px 0;">
                            <textarea v-model="merchantDatas.companyProfile" maxlength="500" autocomplete="off" :class="['textareaStyle',{'closeStyle': disabled}]" :readonly="disabled"></textarea>
                        </div>
                    </li>

                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="two">
                <div class="title">{{$t('AuMer.ContactInfomation')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="legalPerson">{{$t('AuMer.FullNmae')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.legalPerson" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.JobTitle')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.post" id="post" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="liaisonPhone">{{$t('AuMer.TelephoneNo')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.liaisonPhone" :readonly="disabled" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\-]/g,'')" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="email">{{$t('AuMer.EmailAddress')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.email" :readonly="disabled" maxlength="100" @blur="checkPhone('AU')" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>

                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="three">
                <div class="title">{{$t('AuMer.BillingInfomation')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="bankName">{{$t('AuMer.BankName')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.bankName" :readonly="disabled" maxlength="32" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="accountName">{{$t('AuMer.CompanyAccountNmae')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.accountName" :readonly="disabled" maxlength="32" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.BSB')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input v-model.trim="branchCode_1" id="branchCode" type="text" :readonly="disabled" class="brandeInp" maxlength="3" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :class="{'view-input': disabled}" style="width: 44%;" />
                            <span>-</span>
                            <input v-model.trim="branchCode_2" type="text" :readonly="disabled" maxlength="3" class="brandeInp" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :class="{'view-input': disabled}" style="width: 44%;" />
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="accountNo">{{$t('AuMer.AccountNumber')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.accountNo" :readonly="disabled" maxlength="9" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="four">
                <div class="title">{{$t('search.channelInfo')}}</div>
                <ul class="content">
                    <!-- <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('search.SubAccountNo2')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.no" id="no" :readonly="disabled" maxlength="12" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" @blur="checkSubMerchantNo" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate1')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.fee" id="fee" :readonly="disabled" maxlength="5" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'')" :class="{'view-input': disabled}" /></div>
                    </li> -->
                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{$t('search.Alipay')}}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.alipayNo" id="alipayNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="18" @blur="checkAlipayNo" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.alipayHkFee" id="alipayHkFee" autocomplete="off" oninput="this.value=this.value.replace(' ','');this.value=this.value.replace(/[^\d\.]/g,'');this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');if(this.value<0){this.value=0};if(this.value>100){this.value=100}" :readonly="disabled" maxlength="6" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>

                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{$t('mer.AugsPay')}}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.userName')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.augsUserName" id="augsUserName" @blur="checkAugsUserName" :readonly="disabled" maxlength="32" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.APIKey')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.augsApiKey" id="augsApiKey" :readonly="disabled" maxlength="50" autocomplete="off"  :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.SignKey')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.augsSignKey" id="augsSignKey" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.NotifyKey')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.augsNotifyKey" id="augsNotifyKey" :readonly="disabled" maxlength="50" autocomplete="off" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.augsFee" id="augsFee" autocomplete="off" oninput="this.value=this.value.replace(' ','');this.value=this.value.replace(/[^\d\.]/g,'');this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');if(this.value<0){this.value=0};if(this.value>100){this.value=100}" :readonly="disabled" maxlength="6" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="five">
                <div class="title">{{$t('AuMer.OtherInformation')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="distributorNumber">{{$t('search.AgentName')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-show="disabled" v-model.trim="merchantDatas.distributorNumber" :readonly="disabled" :class="{'view-input': disabled}" />
                            <el-select v-show='!disabled' id="distributorObj" v-model="distributorObj" @change='selectId()' value-key="id" clearable :placeholder="$t('placeH.Please')" :readonly="disabled">
                                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="distributorId">{{$t('search.levelID1')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.distributorId" readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="setDay">{{$t('AuMer.SettlementPeriod')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-show="disabled" v-model="setDay" :readonly="disabled" :class="{'view-input': disabled}" />
                            <el-select v-show="!disabled" :placeholder="$t('placeH.Please')" v-model="merchantDatas.setDay" clearable :readonly="disabled">
                                <el-option value="1" label="T+1"></el-option>
                                <el-option value="2" label="T+2"></el-option>
                                <el-option value="3" label="T+3"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont" id="chargeType">{{$t('mer.ServiceChargeBearer1')}}*:</div>
                        </div>
                        <div class="right-div">
                            <input v-show="disabled" type="text" v-model="chargeType" :class="{'view-input': disabled}" />
                            <el-select v-show="!disabled" :placeholder="$t('placeH.Please')" v-model="merchantDatas.chargeType" :readonly="disabled" clearable>
                                <el-option :label="$t('mer.Customer')" value="1"></el-option>
                                <el-option :label="$t('button.Merchant')" value="0"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item" v-if="showSalesmanInfo">
                        <div class="left-div">
                            <div class="cont">{{$t('salesman.Salesman')}}:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-show="disabled" v-model.trim="merchantDatas.salesmanName" id="salesmanName" :readonly="disabled" :class="{'view-input': disabled}" />
                            <el-select v-show="!disabled" :placeholder="$t('placeH.Please')" id="salesmanObj" v-model="salesmanObj" value-key="id" @change='selectSalesman()' clearable :readonly="disabled">
                                <el-option v-for='item in selectSalesSalesmanData' :key="item.id" :label="item.salesmanName" :value="item"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item" v-if="showSalesmanInfo">
                        <div class="left-div">
                            <div class="cont">{{$t('agent.BDStaffNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.salesmanNumber" id="salesmanNumber" readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.DescriptionOfGoods')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.goodsDescription" id="goodsDescription" :readonly="disabled" autocomplete="off" :class="{'view-input': disabled}" maxlength="32" /></div>
                    </li>
                </ul>
                <!-- content结束 -->

                <div class="image-group-title">{{$t('mer.Photos')}}*</div>

                <ul class="content" id="merImgUl" v-show="$route.query.states=='1'">
                    <li class="image-item" id="merImgBtn" v-show='isFiveImg'>
                        <div class="img-div img-group-div">
                            <div class="file-div file-group-div">
                                <el-upload :before-upload="beforeImgUpload" accept="image/jpeg,image/png,image/png" action="/api/share/picture/upload" :readonly="disabled" :show-file-list="false" :on-success="handleStoreLogoSuccess" name="upfile" list-type="picture" :headers="headers">
                                </el-upload>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- content结束 -->

                <!-- 查看图片组 -->
                <ul class="content" id="modifyMerUl" v-show="$route.query.states=='2'">
                    <li class="image-item" v-if='merchantDatas.facadeImageUrl'>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div">
                                <img :src="merchantDatas.facadeImageUrl" @click="handlePictureCardPreview('facadeImageUrl')" />
                                <div class="btn-div">
                                    <div class="view" :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('facadeImageUrl')">{{ $t('button.view') }}</div>
                                    <div :class="[{'del': !disabled}]" v-show='!disabled' @click="delImg10()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="image-item" v-if='merchantDatas.facadeImageUrl1'>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div">
                                <img :src="merchantDatas.facadeImageUrl1" @click="handlePictureCardPreview('facadeImageUrl1')" />
                                <div class="btn-div">
                                    <div class="view" :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('facadeImageUrl1')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg11()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="image-item" v-if='merchantDatas.facadeImageUrl2'>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div">
                                <img :src="merchantDatas.facadeImageUrl2" @click="handlePictureCardPreview('facadeImageUrl2')" />
                                <div class="btn-div">
                                    <div class="view" :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('facadeImageUrl2')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg12()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="image-item" v-if='merchantDatas.facadeImageUrl3'>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div">
                                <img :src="merchantDatas.facadeImageUrl3" @click="handlePictureCardPreview('facadeImageUrl3')" />
                                <div class="btn-div">
                                    <div class="view" :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('facadeImageUrl3')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg13()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="image-item" v-if='merchantDatas.facadeImageUrl4'>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div">
                                <img :src="merchantDatas.facadeImageUrl4" @click="handlePictureCardPreview('facadeImageUrl4')" />
                                <div class="btn-div">
                                    <div class="view" :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('facadeImageUrl4')">{{ $t('button.view') }}</div>
                                    <div class="del" :class="['view', {'view-single': disabled}]" v-show='!disabled' @click="delImg14()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>

                    <li class="image-item" v-show='isMerFiveImg'>
                        <div class="img-div img-group-div">
                            <div class="file-div file-group-div">
                                <el-upload :before-upload="beforeImgUpload" action="/api/share/picture/upload" accept="image/jpeg,image/png,image/png" :readonly="disabled" :show-file-list="false" :on-success="shopPhotosSuccess" name="upfile" list-type="picture" :headers="headers">
                                </el-upload>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- content结束 -->

                <div class="image-group-title">{{$t('other.MerchantLogo')}}</div>

                <ul class="content">
                    <li class="image-item">
                        <div class="img-div img-group-div">
                            <div class="show-div" v-if="merchantDatas.logo" id="licenseImageUrl">
                                <img :src="merchantDatas.logo" class="avatar imgNow pointer" @click="handlePictureCardPreview('logo')">
                                <div class="btn-div">
                                    <div :class="['view', {'view-single': disabled}]" @click="handlePictureCardPreview('logo')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg5()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                            <div class="file-div file-group-div" v-show="!merchantDatas.logo && !disabled">
                                <el-upload action="/api/share/picture/upload" accept="image/jpeg,image/png,image/png" :before-upload="beforeImgUpload" :readonly="disabled" :show-file-list="false" :on-success="handleLogoSuccess" name="upfile" list-type="picture" :headers="headers">
                                </el-upload>
                            </div>
                        </div>
                    </li>
                </ul>

            </div>
            <!-- table-div结束 -->
        </div>

        <div style="height: 100px;"></div>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
import {
    addMerchant,
    merchantDetail,
    queryAgent,
    queryIndustry,
    reauditMer,
    checkMerchantName,
    checkPhone,
    checkSubMerchantNo,
    AU_BD_list,
    checkAlipayHkNo,
    checkAlipayNo,
    checkUnionPayNo,
    checkAugsUserName,
    // checkHkNo
} from "api/businessManagement/merchant/index";
import {
    salesmanAll,
    querySuperiorAgent,
    queryAgentAll
} from "api/merchant/agent/index";
import { findSuperiorFirm, firmAll } from "api/firm/index";

export default {
    name: "merDetails",
    // props: ["id", "states", "disId", "merState"],
    data() {
        return {
            companyId: localStorage.getItem("companyId"),
            userType: localStorage.getItem("userType"),
            locale: localStorage.getItem("locale") == "en" ? "1" : "0",
            selDistributorId: localStorage.getItem("distributorId"),
            grade: localStorage.getItem("grade"),
            distributorObj: {},
            salesmanObj: {},
            //商户新增表格数据
            merchantDatas: {
                //公司资料
                name: undefined /*商户登记名称*/,
                address: undefined /*登记地址*/,
                mailingAddress: undefined /*邮寄地址*/,
                businessRegistrationNo: undefined /*商业登记号码*/,
                registeredCapital: undefined /*资金总额（HK$）*/,
                establishmentYear: undefined /*成立年数*/,
                establishPlace: undefined /*成立地点*/,
                staffNumber: undefined /*雇员人数*/,
                merchantsType: undefined /*商户类型商户类型(0:线上商户 1：线下商户)*/,
                companyType: undefined /*公司类别*/,
                liaisonPerson: undefined /*联络人*/,
                email: undefined /*邮箱地址*/,
                post: undefined /*职位(0:老板,1:店长,2:店员)*/,
                officeNo: undefined /*办公室电话*/,
                liaisonPhone: undefined /*手机号码*/,
                fax: undefined /*传真号码*/,
                legalPerson: undefined /*董事全名*/,
                legalPersonIdNumber: undefined /*董事身份证号*/,
                passportNumber: undefined /*董事护照号码*/,
                nationality: undefined /*国籍*/,
                no: undefined /*子商户号*/,
                hkNo: undefined /*香港商户号*/,
                //联络资料
                url: undefined /*网址*/,
                launchDate: undefined /*预定服务推出日期*/,
                technical: undefined /*技术联络人*/,
                technicalEmail: undefined /*邮箱地址（技术）*/,
                technicalPhone: undefined /*联络电话（技术）*/,
                operation: undefined /*运营联络人*/,
                operationEmail: undefined /*邮箱地址（运营）*/,
                operationPhone: undefined /*联络电话（运营）*/,
                accountant: undefined /*会计联络人*/,
                accountantEmail: undefined /*邮箱地址（会计）*/,
                accountantPhone: undefined /*联络电话（会计）*/,
                //技术资料
                profession: undefined /*业务性质*/,
                industry: undefined /*产品/服务类别*/,
                targetClient: undefined /*目标客户*/,
                paymentServiceProvider: undefined /*现在/曾经选用的付款服务供应商/银行*/,
                turnover: undefined /*过去两年营业额（HK$）*/,
                //互联网上提供的业务
                expressSupplier: undefined /*送货快递商或快递供应商*/,
                serviceHotline: undefined /*客户服务热线*/,
                isReturnPolicy: undefined /*是否有退换货政策(0:是1：否)*/,
                cycleTime: undefined /*由收单至送货所需时间*/,
                isSignFor: undefined /*是否签收(0:是1：否)*/,
                monthDealSumThree: undefined /*每月交易宗数三个月后*/,
                monthDealSumSix: undefined /*每月交易宗数六个月后*/,
                monthDealSumYear: undefined /*每月交易宗数一年后：*/,
                monthOperationRentalThree: undefined /*每月营业总额三个月后*/,
                monthOperationRentalSix: undefined /*每月营业总额六个月后*/,
                monthOperationRentalYear: undefined /*每月营业总额一年后*/,
                monthDealAvg: undefined /*每宗交易平均金额*/,
                monthDealMin: undefined /*每宗交易最低金额*/,
                monthDealMax: undefined /*每宗交易最高金额*/,
                //清结算资讯登记
                accountName: undefined /*账户名称*/,
                accountNo: undefined /*账户号*/,
                bankName: undefined /*银行名称*/,
                bankCode: undefined /*银行编号*/,
                branchCode: undefined /*分行号*/,
                bankAddres: undefined /*银行地址*/,
                swiftCode: undefined /*银行国际代码*/,
                fee: undefined /*手续费率*/,
                chargeType: undefined /*手续费承担方/收费类型(0:商户承担,1:用户承*/,
                distributorId: undefined /*所属代理商（传Id）*/,
                distributorNumber: undefined /*代理商编号*/,
                salesmanId: undefined /*业务员*/,
                salesmanNumber: undefined /*业务员编号*/,
                salesmanProportion: undefined /*分成比例*/,
                //附件
                businessRegistrationUrl: undefined /*商业登记副本*/,
                licenseImageUrl: undefined /*公司注册证明副本*/,
                identityCardFrontImageUrl: undefined /*董事身份证副本*/,
                bankCardImageUrl: undefined /*银行月结单副本*/,
                facadeImageUrl: undefined /*公司或店铺相片*/,
                facadeImageUrl1: undefined /*公司或店铺相片*/,
                facadeImageUrl2: undefined /*公司或店铺相片*/,
                facadeImageUrl3: undefined /*公司或店铺相片*/,
                facadeImageUrl4: undefined /*公司或店铺相片*/,
                setDay: undefined /*结算周期*/,
                //澳洲商户进件
                bankProvince: undefined /*省*/,
                bankCity: undefined /*州*/,
                companyProfile: undefined /*公司简介*/,
                companyUrl: undefined /*公司网站*/,
                salesmanName: undefined /*业务员*/,
                // V2.6
                alipayNo: undefined /*支付宝商户号*/,
                alipayHkNo: undefined /*支付宝HK商户号/支付宝(直连)商户号*/,
                alipayHkFee: undefined /*支付宝HK手续费率/支付宝(直连)手续费率*/,
                wechatHkFee: undefined /*微信支付HK手续费率*/,

                distributorName: undefined /*代理商名称*/,
                companyName: undefined /*公司名称*/,

                // V2.10
                // 暂且舍去，用银联子商户号代替
                // unionPayNo:undefined/*银联商户号*/,
                unionPayFee:undefined/*银联手续费率*/,
                terminalNo:undefined/*终端号*/,
                augsUserName:undefined/*AugsPay用户名*/,
                augsApiKey:undefined/*API密钥*/,
                augsSignKey:undefined/*签名密钥*/,
                augsNotifyKey:undefined/*回调密钥*/,
                augsFee:undefined/*手续费率*/,
                alipaySignKey:undefined/*密钥*/,
                unionPaySubNo:undefined/*银联子商户号*/,
                unionPaySignKey:undefined/*银联密钥*/,
            },
            distributorName: "",
            isModify: this.$route.query.states == "2" ? true : false,
            isAdd: this.$route.query.states == "1" ? true : false,
            disabled: this.$route.query.states == "1" ? false : true,
            showBtn: false,
            headers: { "access-token": sessionStorage.getItem("access-token") },
            options: [],
            optionsI: JSON.parse(localStorage.getItem("queryIndustryObj")),
            nullObj: {},
            count: 0,
            counts: [
                "facadeImageUrl",
                "facadeImageUrl1",
                "facadeImageUrl2",
                "facadeImageUrl3",
                "facadeImageUrl4"
            ],
            isFiveImg: true,
            isMerFiveImg: true,
            HKMerRequiredArr: [
                "name",
                "address",
                "businessRegistrationNo",
                "merchantsType",
                "liaisonPerson",
                "officeNo",
                "liaisonPhone",
                "legalPerson",
                "legalPersonIdNumber",
                "accountName",
                "accountNo",
                "bankName",
                "bankCode",
                "bankAddres",
                "swiftCode",
                "distributorNumber",
                "distributorId",
                "setDay",
                "businessRegistrationUrl",
                "identityCardFrontImageUrl",
                "bankCardImageUrl",
                "industry",
                "chargeType"
            ],
            AuMerRequiredArr: [
                "name",
                "businessRegistrationNo",
                "officeNo",
                "address",
                "whiteLable",
                "legalPerson",
                "liaisonPhone",
                "email",
                "bankName",
                "accountName",
                "branchCode",
                "accountNo",
                "distributorNumber",
                "distributorId",
                "setDay",
                "industry",
                "bankCity",
                "chargeType"
            ],
            requiredArr: [],
            flag: false,
            industryCode: null,
            isReturnPolicy: null,
            isSignFor: null,
            selectSalesSalesmanData: [],
            modifyFlag: false,
            dialogImageUrl: "",
            dialogVisible: false,
            AU_State_list: JSON.parse(
                localStorage.getItem("queryAU_State_list")
            ),
            areaCode: null,
            industryObj: {},
            prer_html: "",
            branchCode_1: "",
            branchCode_2: "",
            merchantsType: "",
            setDay: "",
            chargeType: "",
            industry: "",
            SuperiorFirmData: [],
            showHandle: true,
            showSalesmanInfo: true,
            currency: undefined,
            checkMerNoState: false,
            clientWidth: document.body.clientWidth,
            cnClass: false,
            enClass: false,
            whiteLable: ""
        };
    },
    mounted() {
        if (this.companyId == 2) {
            // 计算文本域宽度
            let textareaItem = $("#textareaItem").width();
            let textareaLeft = $(".left-div").width();
            let textareaRight = textareaItem - textareaLeft - 43;
            $("#textareaLeft").css("width", textareaLeft);
            $("#textareaRight").css("width", textareaRight);
        }
        const that = this;
        window.onresize = function() {
            that.initView();
            if (that.companyId == 2) {
                // 实时计算文本域宽度
                let textareaItem = $("#textareaItem").width();
                let textareaLeft = $(".left-div").width();
                let textareaRight = textareaItem - textareaLeft - 43;
                $("#textareaLeft").css("width", textareaLeft);
                $("#textareaRight").css("width", textareaRight);
            }
        };
        window.addEventListener("scroll", this.handleScroll);
    },
    created() {
        if (this.companyId == "1" )
            this.currency = "HK$ ";
        if (this.companyId == "2") this.currency = "A$ ";

        this.initView("create");

        const _that = this;
        if (this.$route.query.merState == "0") {
            this.isModify = false;
        }
        this.nullObj.companyId = this.companyId;
        if (this.grade == "0") {
            this.nullObj.distributorId = null;
        } else {
            this.nullObj.distributorId =
                this.selDistributorId == "null" ? null : this.selDistributorId;
        }

        this.findFirm(this.selDistributorId);
        this.queryAgentAjax(this.nullObj);

        //查询商户详情数据
        if (this.$route.query.states == "1") {
        } else {
            this.getMerData(this.$route.query.id);
            this.isMerFiveImg = false;
        }

        //查询业务员
        if (this.userType == 2 && this.grade == 0) {
            salesmanAll({ companyId: this.companyId }).then(res => {
                this.selectSalesSalesmanData = res.value;
            });
        }

        //代理商登录时，判断改商户是否为登陆代理商直属商户
        if (this.$route.query.states == "2" && this.userType == "2") {
            this.showHandle =
                this.selDistributorId == this.$route.query.parentId
                    ? true
                    : false;
            if (localStorage.getItem("grade") == 0) {
                this.showHandle = true;
            }
        }

        // 代理商登录时，零级代理商才显示业务员资料
        if (this.userType == "2" && this.grade != "0") {
            this.showSalesmanInfo = false;
        }

        setTimeout(function() {
            $("#merchant").addClass("is-active");
        }, 500);
    },
    updated() {
        $(".border-red").removeClass("border-red");
    },
    beforeRouteLeave(to, from, next) {
        if (to.path == "/merchant") {
            next();
        } else {
            $("#z_businessManagement .el-menu a li:first").removeClass(
                "is-active"
            );
            localStorage.removeItem("searchMerchantData");
            next();
        }
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
    },
    methods: {
        // 滚动时，添加对应的li的active
        handleScroll() {
            var scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            if (this.companyId == "1" ) {
                if (scrollTop < 440) {
                    this.setActive("one");
                } else if (scrollTop >= 440 && scrollTop < 690) {
                    this.setActive("two");
                } else if (scrollTop >= 690 && scrollTop < 900) {
                    this.setActive("three");
                } else if (scrollTop >= 900 && scrollTop < 1232) {
                    this.setActive("four");
                } else if (scrollTop >= 1232 && scrollTop < 1522) {
                    this.setActive("five");
                } else if (scrollTop >= 1522 && scrollTop < 1722) {
                    this.setActive("six");
                } else {
                    this.setActive("seven");
                }
            } else if (this.companyId == "2") {
                if (scrollTop < 362) {
                    this.setActive("one");
                } else if (scrollTop >= 362 && scrollTop < 572) {
                    this.setActive("two");
                } else if (scrollTop >= 572 && scrollTop < 782) {
                    this.setActive("three");
                } else if (scrollTop >= 782 && scrollTop < 992) {
                    this.setActive("four");
                } else {
                    this.setActive("five");
                }
            }
        },
        // 设置li标签的active类名
        setActive(id) {
            for (let i = 0; i < $(".anchors_ul li").length; i++) {
                $($(".anchors_ul li")[i]).removeClass("active");
            }
            $("#" + id + "-li").addClass("active");
        },
        initView(params) {
            // 初始化时，clientWidth会包含滚动条宽度，需要另行减去
            if (params == "create")
                this.clientWidth = document.body.clientWidth - 21; // 获取页面可视区域宽度
            else this.clientWidth = document.body.clientWidth; // 获取页面可视区域宽度

            // 根据中英文以及页面宽度调整顶部固定DIV
            if (this.companyId == "1" ) {
                if (parseInt(this.locale) == 1 && this.clientWidth <= 1793) {
                    // 英文
                    this.enClass = true;
                    this.cnClass = false;
                } else if (
                    parseInt(this.locale) == 0 &&
                    this.clientWidth <= 1429
                ) {
                    // 中文
                    this.cnClass = true;
                    this.enClass = false;
                } else {
                    // 默认
                    this.cnClass = false;
                    this.enClass = false;
                }
            } else if (this.companyId == "2") {
                if (parseInt(this.locale) == 1 && this.clientWidth < 1555) {
                    // 英文
                    this.enClass = true;
                    this.cnClass = false;
                } else if (
                    parseInt(this.locale) == 0 &&
                    this.clientWidth < 1174
                ) {
                    // 中文
                    this.cnClass = true;
                    this.enClass = false;
                } else {
                    // 默认
                    this.cnClass = false;
                    this.enClass = false;
                }
            }
        },
        // 跳转锚点位置
        goAnchor(selector, index) {
            var anchor = this.$el.querySelector(selector);
            if (this.cnClass || this.enClass) {
                document.documentElement.scrollTop = anchor.offsetTop - 120;
            } else {
                document.documentElement.scrollTop = anchor.offsetTop - 80;
            }

            for (let i = 0; i < $(".anchors_ul li").length; i++) {
                $($(".anchors_ul li")[i]).removeClass("active");
            }
            let activeA = $($(".anchors_ul").children()[index]);
            activeA.children().addClass("active");
        },
        //选择上级公司
        selectFirm() {
            for (let i = 0; i < this.SuperiorFirmData.length; i++) {
                if (
                    this.merchantDatas.firmId == this.SuperiorFirmData[i].firmId
                ) {
                    this.merchantDatas.firmNumber = this.SuperiorFirmData[
                        i
                    ].firmNumber;
                    this.merchantDatas.companyName = this.SuperiorFirmData[
                        i
                    ].name;
                }
            }
        },
        //查询上级公司
        findFirm(distributorId) {
            if (!distributorId) return;
            findSuperiorFirm(distributorId).then(res => {
                this.SuperiorFirmData = res.value;
                console.log(res.value);
            });
        },
        // 点击查看大图
        handlePictureCardPreview(url, index) {
            if (index == 0) {
                this.dialogImageUrl = url;
            } else {
                this.dialogImageUrl = this.merchantDatas[url];
            }
            this.dialogVisible = true;
        },
        // 更改公司类别
        setCompanyType() {
            this.$set(
                this.merchantDatas,
                "companyType",
                this.merchantDatas.companyType
            );
        },
        // 取消修改
        reset() {
            if (this.$route.query.states == "2") {
                this.disabled = true;
                this.showBtn = false;
                this.isModify = true;
                this.isMerFiveImg = false;
                this.merchantDatas = JSON.parse(
                    localStorage.getItem("merData")
                );
            } else {
                this.$router.push({ path: "/merchant" });
            }
        },
        // 验证邮箱格式
        valiEmail(key) {
            // const reg = new RegExp("[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?");
            const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
            if (!this.merchantDatas[key]) {
                return false;
            } else if (!reg.test(this.merchantDatas[key])) {
                this.$message(this.$t("hint.EmailFormatIncorrect"));
                // this.merchantDatas[key] = undefined;
            }
        },
        //检验商户名称是否重复
        checkMerchantName() {
            const data =
                this.$route.query.states == "2"
                    ? {
                          name: this.merchantDatas.name,
                          merchantId: this.merchantDatas.merchantId
                      }
                    : { name: this.merchantDatas.name };
            checkMerchantName(data).then(res => {
                if (res.code == 40002032) {
                    this.$message(this.$t("hint.MerchantNameAlreadyExists"));
                    this.merchantDatas.name = "";
                } else {
                    return false;
                }
            });
        },
        //检验商户手机号或者邮箱是否重复
        checkPhone(key) {
            const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
            const phoneOrEmail =
                key == "HK"
                    ? this.merchantDatas.officeNo
                    : this.merchantDatas.email;
            if (!phoneOrEmail) {
                return false;
            }
            if (key == "AU" && !reg.test(this.merchantDatas.email)) {
                this.$message(this.$t("hint.EmailFormatIncorrect"));
                // this.merchantDatas.email = undefined;
            }
            const data =
                key == "HK"
                    ? { phone: this.merchantDatas.officeNo }
                    : { phone: this.merchantDatas.email };
            if (this.$route.query.states == "2")
                data.merchantId = this.merchantDatas.merchantId;
            checkPhone(data).then(res => {
                if (res.code == 40004002) {
                    key == "HK"
                        ? (this.merchantDatas.officeNo = "")
                        : (this.merchantDatas.email = "");
                    this.$message(
                        key == "HK"
                            ? this.$t("hint.OfficePhoneNumberAlreadyExists")
                            : this.$t("hint.ContactPersonsEmailAlreadyExists")
                    );
                }
            });
        },
        //检验微信支付HK商户号是否重复(V2.10暂且不用)
        // checkMerchantHKNo() {
        //     if ( this.disabled || !this.merchantDatas.hkNo ) return false;
        //     let data = {
        //         hkNo: this.merchantDatas.hkNo,
        //         companyId:this.companyId
        //     }
        //     if ( this.$route.query.states == "2" ){
        //         data.merchantId = this.merchantDatas.merchantId;
        //     }
        //     checkHkNo(data).then(res => {
        //         if (res.code != 0) {
        //             this.$message(this.$t("hint.WeChatPayHKNoHasAlreadyExist"));
        //             this.merchantDatas.hkNo = "";
        //         } else {
        //             return false;
        //         }
        //     });
        // },
        //检验子商户号是否重复
        checkSubMerchantNo() {
            if ( this.disabled || !this.merchantDatas.no ) return false;
            let data = {
                no: this.merchantDatas.no,
                companyId:this.companyId
            }
            if ( this.$route.query.states == "2" ){
                data.merchantId = this.merchantDatas.merchantId;
            }
            checkSubMerchantNo(data).then(res => {
                if (res.code != 0) {
                    let msg =
                        this.companyId == "2"
                            ? this.$t("hint.SubaccountAlreadyExists")
                            : this.$t("hint.accountAlreadyExists");
                    this.$message(msg);
                    this.merchantDatas.no = "";
                } else {
                    return false;
                }
            });
        },
        //检验支付宝HK商户号和支付宝(直连)商户号是否重复
        checkAlipayHkNo() {
            if ( this.disabled || !this.merchantDatas.alipayHkNo ) return false;
            let data = {
                alipayHkNo: this.merchantDatas.alipayHkNo,
                companyId:this.companyId
            }
            if ( this.$route.query.states == "2" ){
                data.merchantId = this.merchantDatas.merchantId;
            }
            checkAlipayHkNo(data).then(res => {
                if (res.code != 0) {
                    this.$message(this.$t("hint.alipayDirectHasAlreadyExist"));
                    this.merchantDatas.alipayHkNo = "";
                } else {
                    return false;
                }
            });
        },
        //检验澳洲支付宝商户号是否重复
        checkAlipayNo() {
            if ( this.disabled || !this.merchantDatas.alipayNo ) return false;
            let data = {
                alipayNo: this.merchantDatas.alipayNo,
                companyId:this.companyId
            }
            if ( this.$route.query.states == "2" ){
                data.merchantId = this.merchantDatas.merchantId;
            }
            checkAlipayNo(data).then(res => {
                if (res.code != 0) {
                    this.$message(this.$t("hint.alipayAccountAlreadyExists"));
                    this.merchantDatas.alipayNo = "";
                } else {
                    return false;
                }
            });
        },
        //检查银联商户号是否重复接口
        checkUnionPayNo() {
            if ( this.disabled || !this.merchantDatas.unionPaySubNo ) return false            
            let data = {
                unionPaySubNo: this.merchantDatas.unionPaySubNo,
                companyId:this.companyId
            }
            if ( this.$route.query.states == "2" ){
                data.merchantId = this.merchantDatas.merchantId;
            }
            checkUnionPayNo(data).then(res => {
                if (res.code != 0) {
                    this.$message(this.$t("mer.UnionpaMerchantNoAlreadyExists"));
                    this.merchantDatas.unionPaySubNo = "";
                } else {
                    return false;
                }
            });
        },
        //检查AugsPay用户名是否重复接口
        checkAugsUserName() {
            if ( this.disabled || !this.merchantDatas.augsUserName ) return false            
            let data = {
                augsUserName: this.merchantDatas.augsUserName,
                companyId:this.companyId
            }
            if ( this.$route.query.states == "2" ){
                data.merchantId = this.merchantDatas.merchantId;
            }
            checkAugsUserName(data).then(res => {
                if (res.code != 0) {
                    this.$message(this.$t("mer.AugsPayUsernameAlreadyExists"));
                    this.merchantDatas.augsUserName = "";
                } else {
                    return false;
                }
            });
        },
        // 限制上传图片大小
        beforeImgUpload(file) {
            const isLt5M = file.size / 1024 / 1024 < 5;
            if (!isLt5M) {
                this.$message(this.$t("hint.ThePictureSizeMustNotExceed5M"));
            }
            return isLt5M;
        },
        // 有否签收
        selectIsSignFor() {
            // this.merchantDatas.isSignFor = this.isSignFor;
        },
        // 退换货政策
        selectReturnPolicy() {
            // this.merchantDatas.isReturnPolicy = this.isReturnPolicy;
        },
        // 选择行业
        selectIndustry() {
            this.merchantDatas.industry = this.industryObj.industryName;
            this.merchantDatas.industryCode = this.industryObj.industryCode;
        },
        //删除照片
        delImg10() {
            this.$set(this.merchantDatas, "facadeImageUrl", undefined);
            this.isMerFiveImg = true;
        },
        delImg11() {
            this.$set(this.merchantDatas, "facadeImageUrl1", undefined);
            this.isMerFiveImg = true;
        },
        delImg12() {
            this.$set(this.merchantDatas, "facadeImageUrl2", undefined);
            this.isMerFiveImg = true;
        },
        delImg13() {
            this.$set(this.merchantDatas, "facadeImageUrl3", undefined);
            this.isMerFiveImg = true;
        },
        delImg14() {
            this.$set(this.merchantDatas, "facadeImageUrl4", undefined);
            this.isMerFiveImg = true;
        },
        //修改店铺相片
        shopPhotosSuccess(res) {
            // 修改删除新增图片个数之前统计，所以判断总个数不需要包含上传按钮li
            this.isMerFiveImg =
                $("#modifyMerUl").children().length == 5 ? false : true;
            if (this.merchantDatas.facadeImageUrl == undefined) {
                this.$set(this.merchantDatas, "facadeImageUrl", res.value);
                return false;
            } else if (this.merchantDatas.facadeImageUrl1 == undefined) {
                this.$set(this.merchantDatas, "facadeImageUrl1", res.value);
                return false;
            } else if (this.merchantDatas.facadeImageUrl2 == undefined) {
                this.$set(this.merchantDatas, "facadeImageUrl2", res.value);
                return false;
            } else if (this.merchantDatas.facadeImageUrl3 == undefined) {
                this.$set(this.merchantDatas, "facadeImageUrl3", res.value);
                return false;
            } else if (this.merchantDatas.facadeImageUrl4 == undefined) {
                this.$set(this.merchantDatas, "facadeImageUrl4", res.value);
                return false;
            }
        },
        delAndView(id) {
            const that = this;
            if (id == 0) {
                // 绑定删除事件
                $("#spanID").click(function() {
                    that.$set(that.merchantDatas, "facadeImageUrl", undefined);
                    $("#liID").remove();
                    that.count = 0;
                    that.isFiveImg = true;
                });

                // 绑定预览大图事件
                $(".imgItem").click(function(params) {
                    that.dialogImageUrl = that.merchantDatas["facadeImageUrl"];
                    that.dialogVisible = true;
                });
            } else {
                // 绑定删除事件
                $("#spanID" + id).click(function() {
                    that.$set(
                        that.merchantDatas,
                        "facadeImageUrl" + id,
                        undefined
                    );
                    $("#liID" + id).remove();
                    that.count = id;
                    that.isFiveImg = true;
                });

                // 绑定预览大图事件
                $(".imgItem" + id).click(function(params) {
                    that.dialogImageUrl =
                        that.merchantDatas["facadeImageUrl" + id];
                    that.dialogVisible = true;
                });
            }
        },
        //香港新增公司或店铺照片
        handleStoreLogoSuccess(res) {
            const that = this;
            // 循环统计图片组图片数量
            for (let i = this.counts.length; i >= 0; i--) {
                if (this.merchantDatas[this.counts[i]] == undefined) {
                    this.count = i;
                }
            }

            if (this.count == 0) {
                this.merchantDatas.facadeImageUrl = res.value;

                // 拼接图片li
                const ul_list =
                    "<li class='image-item' id='liID'><div class='img-div img-group-div'><div class='show-div show-group-div'><img class='imgItem' src='" +
                    this.merchantDatas.facadeImageUrl +
                    "' /><div class='btn-div'><div class='view imgItem' >" +
                    this.$t("button.view") +
                    "</div><div class='del' id='spanID'>" +
                    this.$t("button.delete") +
                    "</div></div></div></div></li>";
                // 插入到图片组中按钮li前面
                $("#merImgBtn").before(ul_list);

                // 调用绑定事件方法
                this.delAndView(0);
            } else if (this.count == 1) {
                this.merchantDatas.facadeImageUrl1 = res.value;

                // 拼接图片li
                const ul_list =
                    "<li class='image-item' id='liID" +
                    this.count +
                    "'><div class='img-div img-group-div'><div class='show-div show-group-div'><img class='imgItem" +
                    this.count +
                    "' src='" +
                    this.merchantDatas.facadeImageUrl1 +
                    "' /><div class='btn-div'><div class='view imgItem" +
                    this.count +
                    "' >" +
                    this.$t("button.view") +
                    "</div><div class='del' id='spanID" +
                    this.count +
                    "'>" +
                    this.$t("button.delete") +
                    "</div></div></div></div></li>";
                // 插入到图片组中按钮li前面
                $("#merImgBtn").before(ul_list);

                // 调用绑定事件方法
                this.delAndView(1);
            } else if (this.count == 2) {
                this.merchantDatas.facadeImageUrl2 = res.value;

                // 拼接图片li
                const ul_list =
                    "<li class='image-item' id='liID" +
                    this.count +
                    "'><div class='img-div img-group-div'><div class='show-div show-group-div'><img class='imgItem" +
                    this.count +
                    "' src='" +
                    this.merchantDatas.facadeImageUrl2 +
                    "' /><div class='btn-div'><div class='view imgItem" +
                    this.count +
                    "' >" +
                    this.$t("button.view") +
                    "</div><div class='del' id='spanID" +
                    this.count +
                    "'>" +
                    this.$t("button.delete") +
                    "</div></div></div></div></li>";
                // 插入到图片组中按钮li前面
                $("#merImgBtn").before(ul_list);

                // 调用绑定事件方法
                this.delAndView(2);
            } else if (this.count == 3) {
                this.merchantDatas.facadeImageUrl3 = res.value;

                // 拼接图片li
                const ul_list =
                    "<li class='image-item' id='liID" +
                    this.count +
                    "'><div class='img-div img-group-div'><div class='show-div show-group-div'><img class='imgItem" +
                    this.count +
                    "' src='" +
                    this.merchantDatas.facadeImageUrl3 +
                    "' /><div class='btn-div'><div class='view imgItem" +
                    this.count +
                    "' >" +
                    this.$t("button.view") +
                    "</div><div class='del' id='spanID" +
                    this.count +
                    "'>" +
                    this.$t("button.delete") +
                    "</div></div></div></div></li>";
                // 插入到图片组中按钮li前面
                $("#merImgBtn").before(ul_list);

                // 调用绑定事件方法
                this.delAndView(3);
            } else if (this.count == 4) {
                this.merchantDatas.facadeImageUrl4 = res.value;

                // 拼接图片li
                const ul_list =
                    "<li class='image-item' id='liID" +
                    this.count +
                    "'><div class='img-div img-group-div'><div class='show-div show-group-div'><img class='imgItem" +
                    this.count +
                    "' src='" +
                    this.merchantDatas.facadeImageUrl4 +
                    "' /><div class='btn-div'><div class='view imgItem" +
                    this.count +
                    "' >" +
                    this.$t("button.view") +
                    "</div><div class='del' id='spanID" +
                    this.count +
                    "'>" +
                    this.$t("button.delete") +
                    "</div></div></div></div></li>";
                // 插入到图片组中按钮li前面
                $("#merImgBtn").before(ul_list);

                // 调用绑定事件方法
                this.delAndView(4);
            }
            this.isFiveImg =
                $("#merImgUl").children().length == 6 ? false : true;
        },
        //商业登记副本
        delImg() {
            this.$set(this.merchantDatas, "businessRegistrationUrl", undefined);
        },
        //公司注册证明副本
        delImg1() {
            this.$set(this.merchantDatas, "licenseImageUrl", undefined);
        },
        //董事身份证副本
        delImg2() {
            this.$set(
                this.merchantDatas,
                "identityCardFrontImageUrl",
                undefined
            );
        },
        //银行月结单相片
        delImg3() {
            this.$set(this.merchantDatas, "bankCardImageUrl", undefined);
        },
        //公司或店铺相片
        delImg4() {
            this.$set(this.merchantDatas, "facadeImageUrl", undefined);
        },
        //商户图标
        delImg5() {
            this.$set(this.merchantDatas, "logo", undefined);
            return false;
        },
        //根据商户id查询商户信息
        getMerData(id) {
            const _that = this;
            merchantDetail(id)
                .then(res => {
                    this.merchantDatas = res.value;
                    this.merchantsType =
                        this.merchantDatas.merchantsType == "Y"
                            ? this.$t("mer.OnlineMerchants")
                            : this.$t("mer.UnderLineMerchant");
                    this.chargeType =
                        this.merchantDatas.chargeType == "1"
                            ? this.$t("mer.Customer")
                            : this.$t("button.Merchant");
                    for (let i = 0; i < this.optionsI.length; i++) {
                        if (
                            _that.merchantDatas.industryCode ==
                            _that.optionsI[i].industryCode
                        ) {
                            _that.industry = _that.optionsI[i].industryName;
                            break;
                        }
                    }
                    if (this.merchantDatas.setDay == "1") {
                        this.setDay = "T+1";
                    } else if (this.merchantDatas.setDay == "2") {
                        this.setDay = "T+2";
                    } else if (this.merchantDatas.setDay == "3") {
                        this.setDay = "T+3";
                    }
                    if (this.$route.query.merState == "2") {
                        $("#industryObj").attr("placeholder", _that.industry);
                    }
                    if (this.companyId == "2") {
                        this.areaCode = this.merchantDatas.bankCity;
                        this.branchCode_1 = this.merchantDatas.branchCode.slice(
                            0,
                            3
                        );
                        this.branchCode_2 = this.merchantDatas.branchCode.slice(
                            4,
                            7
                        );
                        this.whiteLable =
                            this.merchantDatas.whiteLable == "Y"
                                ? this.$t("search.YES")
                                : this.$t("search.NO");
                    }
                    for (let i = 0; i < this.AU_State_list.length; i++) {
                        if (
                            this.merchantDatas.bankCity ==
                            this.AU_State_list[i].areaCode
                        ) {
                            this.merchantDatas.bankCity = this.AU_State_list[
                                i
                            ].areaName;
                            break;
                        }
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        clearFirmNumber() {
            this.merchantDatas.firmNumber = "";
        },
        //修改按钮
        modify() {
            this.disabled = false;
            this.showBtn = true;
            this.isModify = false;
            this.isMerFiveImg =
                $("#modifyMerUl").children().length == 5 ? false : true;
            localStorage.setItem("merData", JSON.stringify(this.merchantDatas));
            $("#distributorObj").attr(
                "placeholder",
                this.merchantDatas.distributorName
            );
            $("#salesmanObj").attr(
                "placeholder",
                this.merchantDatas.salesmanName
            );
            this.distributorObj = "";
            this.salesmanObj = "";
        },
        handleLogoSuccess(res) {
            this.$set(this.merchantDatas, "logo", res.value);
        },
        //商业登记副本
        handleBusinessSuccess(res) {
            this.$set(this.merchantDatas, "businessRegistrationUrl", res.value);
        },
        //公司注册证明副本
        handleCompanySuccess(res) {
            this.$set(this.merchantDatas, "licenseImageUrl", res.value);
        },
        //董事身份证副本
        handleCopySuccess(res) {
            this.$set(
                this.merchantDatas,
                "identityCardFrontImageUrl",
                res.value
            );
        },
        //银行月结单相片
        handleMonthlySuccess(res) {
            this.$set(this.merchantDatas, "bankCardImageUrl", res.value);
        },
        //公司或店铺相片
        AuMerHandleStoreLogoSuccess(res) {
            this.$set(this.merchantDatas, "facadeImageUrl", res.value);
        },
        // 检验费率格式
        checkFee(money) {
            if(money == "" || money == undefined) return true;
            let commas = (money.toString().split('.')).length-1;
            if(commas > 1) {
                return false;
            }
            if(money.toString().indexOf(".") == 0 || money.toString().lastIndexOf(".") == (money.toString().length - 1)) {
                return false;
            } else {
                return true;
            }
        },
        //商户新增按钮
        addMec() {
            //				let remarks=0;
            this.merchantDatas.remarks = 0;
            this.ajaxAddMec(this.merchantDatas);
        },
        //商户新增资料向后台提交数据
        ajaxAddMec(value) {
            const _that = this;
            if (this.companyId == "2") {
                value.branchCode = this.branchCode_1 + "-" + this.branchCode_2;
                this.checkMerNo(2);
            } else if (this.companyId == "1" ) {
                this.checkMerNo(1);
            }

            if (!this.checkMerNoState) return false;

            [...this.requiredArr] =
                this.companyId == "2"
                    ? this.AuMerRequiredArr
                    : this.HKMerRequiredArr;
            for (let i = 0; i < this.requiredArr.length; i++) {
                if (!value[this.requiredArr[i]]) {
                    _that.prer_html = $("#" + _that.requiredArr[i]).html();
                    //   console.log($("#" + _that.requiredArr[i]));
                    //   console.log(_that.prer_html);
                    if (localStorage.getItem("locale") == "en") {
                        _that.prer_html = _that.prer_html
                            .replace("*:", "")
                            .toLocaleLowerCase();
                    } else {
                        _that.prer_html = _that.prer_html.replace("*:", "");
                    }
                    //   $("#" + _that.requiredArr[i]).addClass("border-red");
                    this.$message(this.$t("hint.pleaseEnter") + this.prer_html);
                    return false;
                }
            }

            if(this.companyId == 1) {
                // 判断香港机构各手续费率格式
                if(!this.checkFee(this.merchantDatas.fee)) {
                    this.$message(this.$t("search.WechatRMBWallet") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
                if(!this.checkFee(this.merchantDatas.wechatHkFee)) {
                    this.$message(this.$t("search.WechatHKDWallet") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
                if(!this.checkFee(this.merchantDatas.unionPayFee)) {
                    this.$message(this.$t("trade.Unionpay") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
                if(!this.checkFee(this.merchantDatas.alipayHkFee)) {
                    this.$message(this.$t("mer.alipayDirect") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
            } else {
                // 判断澳洲机构各手续费率格式
                if(!this.checkFee(this.merchantDatas.alipayHkFee)) {
                    this.$message(this.$t("search.Alipay") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
                if(!this.checkFee(this.merchantDatas.augsFee)) {
                    this.$message(this.$t("mer.AugsPay") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
            }

            const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
            if (value.email && !reg.test(value.email)) {
                this.$message(this.$t("hint.EmailFormatIncorrect"));
                return false;
            }
            if (value.technicalEmail && !reg.test(value.technicalEmail)) {
                this.$message(this.$t("hint.EmailFormatIncorrect"));
                return false;
            }
            if (value.operationEmail && !reg.test(value.operationEmail)) {
                this.$message(this.$t("hint.EmailFormatIncorrect"));
                return false;
            }
            if (value.accountantEmail && !reg.test(value.accountantEmail)) {
                this.$message(this.$t("hint.EmailFormatIncorrect"));
                return false;
            }

            if (
                value.facadeImageUrl ||
                value.facadeImageUrl1 ||
                value.facadeImageUrl2 ||
                value.facadeImageUrl3 ||
                value.facadeImageUrl4
            ) {
                this.flag = true;
            } else {
                this.$message(this.$t("hint.PleaseAddMerchantOrShopPhoto"));
                return false;
            }
            if (this.flag) {
                value.companyId = localStorage.getItem("companyId");
                value.hkNo = value.hkNo ? Number(value.hkNo) : null;
                this.$msgbox({
                    title: this.$t("hint.Alert"),
                    message: this.$t("hint.SureToAddThisMerchant"),
                    showClose: false,
                    closeOnClickModal: false,
                    showCancelButton: true,
                    confirmButtonText: this.$t("button.OK"),
                    cancelButtonText: this.$t("button.Cancel"),
                    beforeClose: (action, instance, done) => {
                        if (action == "confirm") {
                            addMerchant(value).then(res => {
                                if (res.code == 0) {
                                    this.$notify({
                                        title: this.$t("hint.Alert"),
                                        message: this.$t("hint.CreateOK"),
                                        type: "success",
                                        duration: 3000
                                    });
                                    //新增成功返回商户列表
                                    this.$router.push({ path: "/merchant" });
                                } else if (res.code == 40004002) {
                                    this.$notify({
                                        title: this.$t("hint.Alert"),
                                        message: this.$t(
                                            "hint.OfficePhoneNumberAlreadyExists"
                                        ),
                                        type: "error",
                                        duration: 3000
                                    });
                                } else if (res.code == 40002032) {
                                    this.$notify({
                                        title: this.$t("hint.Alert"),
                                        message: this.$t(
                                            "hint.MerchantNameAlreadyExists"
                                        ),
                                        type: "error",
                                        duration: 3000
                                    });
                                } else {
                                    this.$notify({
                                        title: this.$t("hint.Alert"),
                                        message: this.$t("hint.CreateFailed"),
                                        type: "error",
                                        duration: 3000
                                    });
                                }
                            });
                        }
                        done();
                    }
                });
            }
        },
        //修改完成提交按钮
        commitModify() {
            if (this.$route.query.merState == "2") {
                //   重新进件
                this.ajaxMerDetails(this.merchantDatas, 0);
            } else {
                //   修改
                this.ajaxMerDetails(this.merchantDatas, 1);
            }
        },
        // 商户重新提交资料

        //商户修改资料向后台提交数据的方法
        ajaxMerDetails(value, index) {
            //  index 1修改  0 重新进件
            const _that = this;
            [...this.requiredArr] =
                this.companyId == "2"
                    ? this.AuMerRequiredArr
                    : this.HKMerRequiredArr;
            if (this.companyId == "2") {
                value.branchCode = this.branchCode_1 + "-" + this.branchCode_2;
                this.checkMerNo(2);
            } else if (this.companyId == "1" ) {
                this.checkMerNo(1);
            }

            if (!this.checkMerNoState) return false;

            for (let i = 0; i < this.requiredArr.length; i++) {
                if (!value[this.requiredArr[i]]) {
                    _that.prer_html = $("#" + _that.requiredArr[i]).html();
                    if (localStorage.getItem("locale") == "en") {
                        _that.prer_html = _that.prer_html
                            .replace("*:", "")
                            .toLocaleLowerCase();
                    } else {
                        _that.prer_html = _that.prer_html.replace("*:", "");
                    }
                    //   $("#" + _that.requiredArr[i]).addClass("border-red");
                    this.$message(this.$t("hint.pleaseEnter") + this.prer_html);
                    return false;
                }
            }

            if(this.companyId == 1) {
                // 判断香港机构各手续费率格式
                if(!this.checkFee(this.merchantDatas.fee)) {
                    this.$message(this.$t("search.WechatRMBWallet") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
                if(!this.checkFee(this.merchantDatas.wechatHkFee)) {
                    this.$message(this.$t("search.WechatHKDWallet") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
                if(!this.checkFee(this.merchantDatas.unionPayFee)) {
                    this.$message(this.$t("trade.Unionpay") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
                if(!this.checkFee(this.merchantDatas.alipayHkFee)) {
                    this.$message(this.$t("mer.alipayDirect") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
            } else {
                // 判断澳洲机构各手续费率格式
                if(!this.checkFee(this.merchantDatas.alipayHkFee)) {
                    this.$message(this.$t("search.Alipay") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
                if(!this.checkFee(this.merchantDatas.augsFee)) {
                    this.$message(this.$t("mer.AugsPay") + this.$t("hint.feeRateFormatIncorrect"));
                    return false;
                }
            }

            const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;

            if (
                this.merchantDatas.email &&
                !reg.test(this.merchantDatas.email)
            ) {
                this.$message(this.$t("hint.EmailFormatIncorrect"));
                return false;
            }
            if (
                this.merchantDatas.technicalEmail &&
                !reg.test(this.merchantDatas.technicalEmail)
            ) {
                this.$message(this.$t("hint.EmailFormatIncorrect"));
                return false;
            }
            if (
                this.merchantDatas.operationEmail &&
                !reg.test(this.merchantDatas.operationEmail)
            ) {
                this.$message(this.$t("hint.EmailFormatIncorrect"));
                return false;
            }
            if (
                this.merchantDatas.accountantEmail &&
                !reg.test(this.merchantDatas.accountantEmail)
            ) {
                this.$message(this.$t("hint.EmailFormatIncorrect"));
                return false;
            }

            if (
                this.merchantDatas.facadeImageUrl ||
                this.merchantDatas.facadeImageUrl1 ||
                this.merchantDatas.facadeImageUrl2 ||
                this.merchantDatas.facadeImageUrl3 ||
                this.merchantDatas.facadeImageUrl4
            ) {
                this.modifyFlag = true;
            } else {
                this.$message(this.$t("hint.PleaseAddMerchantOrShopPhoto"));
                return false;
            }

            if (this.modifyFlag) {
                this.merchantDatas.oldTermId = this.termId;
                this.merchantDatas.id = this.$route.query.id;
                this.merchantDatas.bankcardId = this.bankcardId;
                if (this.companyId == "2")
                    this.merchantDatas.bankCity = this.areaCode;
                const hintMerMsg =
                    this.$route.query.merState == "2"
                        ? this.$t("hint.SureToAddThisMerchant")
                        : this.$t("hint.SureToChangeInfoOfTheMerchant");
                // console.log(this.merchantDatas);
                this.$msgbox({
                    title: this.$t("hint.Alert"),
                    message: hintMerMsg,
                    showClose: false,
                    closeOnClickModal: false,
                    showCancelButton: true,
                    confirmButtonText: this.$t("button.OK"),
                    cancelButtonText: this.$t("button.Cancel")
                })
                    .then(() => {
                        const func = index == 0 ? reauditMer : addMerchant;
                        value.remarks = index == 0 ? 0 : 1;
                        func(value).then(res => {
                            // console.log("修改按钮确定修改后台返回的信息");
                            // console.log(res);
                            if (res.code == 0) {
                                this.$msgbox({
                                    title: this.$t("hint.Alert"),
                                    message: this.$t(
                                        "hint.SubmittedApprovalPending"
                                    ),
                                    showClose: false,
                                    closeOnClickModal: false,
                                    showCancelButton: false,
                                    confirmButtonText: this.$t("button.OK"),
                                    cancelButtonText: this.$t("button.Cancel"),
                                    customClass: "single-msg-box"
                                })
                                    .then(() => {
                                        //商户修改成功返回商户列表页
                                        this.$router.push({
                                            path: "/merchant"
                                        });
                                    })
                                    .catch(() => {});
                            } else {
                                this.$notify({
                                    title: this.$t("hint.Alert"),
                                    message: this.$t("hint.ChangeFailed"),
                                    type: "error",
                                    duration: 2000
                                });
                            }
                        });
                    })
                    .catch(() => {});
            }
        },
        // 验证是否填写商户号
        checkMerNo(companyId) {
            if (companyId == 1 ) {
                // 必须填写一个商户号
                if ( !this.merchantDatas.no && !this.merchantDatas.alipayHkNo && !this.merchantDatas.hkNo && !this.merchantDatas.unionPaySubNo && !this.merchantDatas.alipayHkNo ) {
                    this.$message(this.$t("hint.pleaseInputAccountNo"));
                    this.checkMerNoState = false;
                    return false;
                }

                // 当填写微信支付商户号，手续费率不能为空
                if (this.merchantDatas.no && !this.merchantDatas.fee) {
                    this.$message(this.$t("hint.pleaseInputServiceChargeRate"));
                    this.checkMerNoState = false;
                    return false;
                }

                // 当填写微信支付HK商户号，手续费率不能为空
                if ( this.merchantDatas.hkNo && !this.merchantDatas.wechatHkFee ) {
                    this.$message( this.$t("hint.pleaseInputServiceChargeRateHK") );
                    this.checkMerNoState = false;
                    return false;
                }

                // 当填写银联商户号，手续费率不能为空
                if ( this.merchantDatas.unionPaySubNo && !this.merchantDatas.unionPayFee ) {
                    this.$message( this.$t("mer.pleaseInputUnionpayFeeRate") );
                    this.checkMerNoState = false;
                    return false;
                }

                // 当填写银联商户号，终端号不能为空
                if ( this.merchantDatas.unionPaySubNo && !this.merchantDatas.terminalNo ) {
                    this.$message( this.$t("mer.pleaseInputTerminalNo") );
                    this.checkMerNoState = false;
                    return false;
                }

                // 当填写银联商户号，密钥不能为空
                if ( this.merchantDatas.unionPaySubNo && !this.merchantDatas.unionPaySignKey ) {
                    this.$message( this.$t("mer.pleaseInputUnionpayKey") );
                    this.checkMerNoState = false;
                    return false;
                }

                // 当填写支付宝商户号，手续费率不能为空
                if ( this.merchantDatas.alipayHkNo && !this.merchantDatas.alipayHkFee ) {
                    this.$message( this.$t('hint.pleaseInput') + this.$t("mer.alipayDirect") + this.$t("mer.ServiceChargeRate") );
                    this.checkMerNoState = false;
                    return false;
                }

                // 当填写支付宝商户号，密钥不能为空
                if ( this.merchantDatas.alipayHkNo && !this.merchantDatas.alipaySignKey ) {
                    this.$message( this.$t('hint.pleaseInput') + this.$t("mer.key") );
                    this.checkMerNoState = false;
                    return false;
                }

                // 当填写手续费率，微信支付商户号不能为空
                if (!this.merchantDatas.no && this.merchantDatas.fee) {
                    this.$message(this.$t("hint.pleaseInputAccountNo"));
                    this.checkMerNoState = false;
                    return false;
                }

                // 当填写手续费率，微信支付HK商户号不能为空
                if ( !this.merchantDatas.hkNo && this.merchantDatas.wechatHkFee ) {
                    this.$message( this.$t('hint.pleaseInput') + this.$t("search.WechatHKDWallet") + " " + this.$t("mer.merchantNo") );
                    this.checkMerNoState = false;
                    return false;
                }

                // 当填写手续费率或终端号或密钥，银联商户号不能为空
                if ( !this.merchantDatas.unionPaySubNo && (this.merchantDatas.unionPaySubNo || this.merchantDatas.unionPayFee || this.merchantDatas.terminalNo || this.merchantDatas.unionPaySignKey)) {
                    this.$message( this.$t('hint.pleaseInput') + this.$t("mer.UnionpaMerchantNo") );
                    this.checkMerNoState = false;
                    return false;
                }

                // 当填写手续费率或密钥，支付宝商户号不能为空
                if ( !this.merchantDatas.alipayHkNo && (this.merchantDatas.alipayHkFee || this.merchantDatas.alipaySignKey)) {
                    this.$message( this.$t('hint.pleaseInput') + this.$t("mer.alipayDirect") + this.$t("mer.merchantNo") );
                    this.checkMerNoState = false;
                    return false;
                }

            } else if (companyId == 2) {

                if (!this.merchantDatas.augsUserName && !this.merchantDatas.alipayNo) {
                    this.$message(this.$t("hint.pleaseInputAccountNo"));
                    this.checkMerNoState = false;
                    return false;
                }
                if ( this.merchantDatas.alipayNo && !this.merchantDatas.alipayHkFee ) {
                    this.$message( this.$t("hint.pleaseInputServiceChargeRate3") );
                    this.checkMerNoState = false;
                    return false;
                }
                if ( !this.merchantDatas.alipayNo && this.merchantDatas.alipayHkFee ) {
                    this.$message( this.$t('hint.pleaseInput') + " " + this.$t("search.SubAccountNo4") );
                    this.checkMerNoState = false;
                    return false;
                }
                if (this.merchantDatas.augsUserName && !this.merchantDatas.augsApiKey) {
                    this.$message(this.$t("mer.pleaseInputAPIKey"));
                    this.checkMerNoState = false;
                    return false;
                }
                if (this.merchantDatas.augsUserName && !this.merchantDatas.augsSignKey) {
                    this.$message(this.$t("mer.pleaseInputSignKey"));
                    this.checkMerNoState = false;
                    return false;
                }
                if (this.merchantDatas.augsUserName && !this.merchantDatas.augsNotifyKey) {
                    this.$message(this.$t("mer.pleaseInputNotifyKey"));
                    this.checkMerNoState = false;
                    return false;
                }
                if (this.merchantDatas.augsUserName && !this.merchantDatas.augsFee) {
                    this.$message(this.$t("mer.pleaseInputAugsPayFeeRate"));
                    this.checkMerNoState = false;
                    return false;
                }
                if (!this.merchantDatas.augsUserName && (this.merchantDatas.augsApiKey || this.merchantDatas.augsSignKey || this.merchantDatas.augsNotifyKey || this.merchantDatas.augsFee)) {
                    this.$message(this.$t("hint.pleaseInput") + this.$t('mer.AugsPayUsername'));
                    this.checkMerNoState = false;
                    return false;
                }

            }
            this.checkMerNoState = true;
        },
        //查询代理商
        queryAgentAjax(data) {
            querySuperiorAgent(data).then(res => {
                this.options = res.value.filter(function(item, index, array) {
                    return item.grade != 0;
                });
            });
        },
        selectId() {
            this.merchantDatas.distributorId = this.distributorObj.id;
            this.merchantDatas.distributorNumber = this.distributorObj.name;
            this.merchantDatas.distributorName = this.distributorObj.name;
        },
        selectSalesman() {
            this.merchantDatas.salesmanName = this.salesmanObj.salesmanName;
            this.merchantDatas.salesmanNumber = this.salesmanObj.salesmanNumber;
            this.merchantDatas.salesmanId = this.salesmanObj.id;
            // console.log(this.salesmanObj);
        }
        // 格式化显示金额
    }
};
</script>

<style lang="scss" scoped>
.el-upload-list--picture .el-upload-list__item {
    width: 80px;
    float: left;
}
.el-upload-list--picture
    .el-upload-list__item.is-success
    .el-upload-list__item-name {
    display: none;
}
.border-red {
    border: 1px solid red;
}
.brandeInp {
    width: 50px;
    border: 1px solid #999;
    box-sizing: border-box;
}
#modifyMerUl {
    min-height: 250px;
}
</style>